<script setup lang="ts">
import { reactive, ref } from "vue";
import { toast, checkPhon } from "@/utils/tools";
import { apiAddressAdd, apiAddressEdit, apiAddressInfo } from "@/apis/address";
import { onLoad } from "@dcloudio/uni-app";
const addressId = ref(null);
const sence = ref("add");
const form = ref();
const data = reactive({
  rules: {
    recipient: {
      type: "string",
      required: true,
      message: "请填写姓名",
      trigger: ["blur", "change"],
    },
    phone: {
      type: "string",
      required: true,
      message: "请填写手机号",
      trigger: ["blur", "change"],
    },
    address: {
      type: "string",
      required: true,
      message: "请填写姓名",
      trigger: ["blur", "change"],
    },
  },
  formData: {
    id: "",
    recipient: "",
    phone: "",
    address: "",
    area: "山东省日照市",
    tags: "",
    bq: "",
    state: 0,
  },
});
const submit = () => {
  //   if (!checkPhon(data.formData.phone)) {
  //     toast("电话格式不正确！");
  //     return false;
  //   }
  form.value.validate().then((res: any) => {
    data.formData.state = data.formData.state ? 1 : 0;
    sence.value == "edit"
      ? apiAddressEdit(data.formData)
      : apiAddressAdd(data.formData);
    toast("操作成功");
    uni.navigateBack({ delta: 1 });
  });
};
const handleCoord = () => {
  // toast('定位中');
  uni.chooseLocation({
    success: (res: any) => {
      data.formData.area = res.address
    },
    fail: (err) => {
    },
  });
};
const getDetail = async () => {
  let detail = await apiAddressInfo({ id: data.formData.id });
  Object.assign(data.formData, detail.data);
};
onLoad((options: any) => {
  data.formData.id = options.id;
  if (options.sence) {
    sence.value = options.sence;
  }
  if (data.formData.id) {
    getDetail();
  }
});
</script>

<template>
  <view class="container">
    <uv-form
      labelPosition="left"
      :model="data.formData"
      :rules="data.rules"
      ref="form"
    >
      <view class="l-card">
        <uv-form-item label="姓名:" prop="recipient" borderBottom>
          <uv-input
            border="none"
            v-model="data.formData.recipient"
            placeholder="请输入姓名"
          ></uv-input>
        </uv-form-item>
        <uv-form-item label="电话:" prop="phone" borderBottom>
          <uv-input
            border="none"
            v-model="data.formData.phone"
            placeholder="请输入电话"
            :maxlength="11"
            type="number"
          ></uv-input>
        </uv-form-item>
        <uv-form-item
          label="所在地区:"
          prop="userInfo.name"
          @click="handleCoord"
          labelWidth="130rpx"
          borderBottom
        >
          <uv-input
            border="none"
            placeholder="请选择所在地区"
            :disabled="true"
            v-model="data.formData.area"
          >
            <template v-slot:suffix>
              <view class="coord flex" @click="handleCoord">
                <image
                  src="@/static/images/coord-select.png"
                  mode="scaleToFill"
                />
                <text>定位</text>
              </view>
            </template>
          </uv-input>
        </uv-form-item>
        <uv-form-item label="详细地址:" prop="address" labelWidth="130rpx">
          <uv-input
            border="none"
            placeholder="请输入详细地址"
            v-model="data.formData.address"
          ></uv-input>
        </uv-form-item>
      </view>

      <view class="l-card">
        <uv-form-item label="标签:" prop="name" borderBottom>
          <uv-radio-group v-model="data.formData.bq" placement="row">
            <uv-radio name="家" label="家"></uv-radio>
            <uv-radio name="公司" label="公司"></uv-radio>
            <uv-radio name="其他" label="其他"></uv-radio>
          </uv-radio-group>
        </uv-form-item>
        <uv-form-item label="设置默认地址:" prop="state" labelWidth="84%">
          <uv-switch
            v-model="data.formData.state"
            :activeValue="1"
            :inactiveValue="0"
          ></uv-switch>
        </uv-form-item>
      </view>
    </uv-form>

    <view class="btn-box">
      <button @click="submit">保存</button>
    </view>
  </view>
</template>
<style scoped lang="scss">
.coord {
  margin-right: 20rpx;

  image {
    width: 40rpx;
    height: 40rpx;
  }

  text {
    color: #9a9a9a;
  }
}

.container {
  padding: 20rpx 0;
}

.l-card {
  border-radius: 0;
  margin-bottom: 30rpx;
  padding: 8rpx 20rpx !important;
}

:deep(.uv-radio-group--row) {
  justify-content: space-between;
  padding: 0 120rpx 0 20rpx;
  box-sizing: border-box;
}

:deep(.uv-input) {
  background-color: transparent !important;
}

:deep(.uv-form-item__body__left) {
  width: auto !important;
}
</style>
